<template>
  <div v-show="loading" class="markbox">
    <div class="sun-loading"></div>
  </div>
</template>

<script>
export default {
  name: 'Loading',
  data() {
    return {
      loading: false
    }
  },
  created() {
    var that = this
    this.bus.$on('loading', function(data) {
      that.loading = !!data
      // 超过一秒关闭弹窗
      setTimeout(() => { this.bus.$emit('loading', false) }, 5000)
    })
  }
}
</script>
<style lang="scss" scoped>
.markbox{
  background-color: rgb(179 175 175 / 50%);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.sun-loading {
	width: 45px;
	height: 45px;
	display: block;
	animation: sunLoading 1s steps(12, end) infinite;
	background: transparent 	url('');
	background-size: 100%;
    margin:auto;
    position:absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right:0;
}
/*loading结束*/
</style>
